<template>
  <view class="bottom-nav">
    <view
      class="nav-item active"
      v-for="(item, index) in tabBarList"
      :key="index"
      @tap="handleTabClick(index)"
    >
      <image :src="getSrc(index)" class="nav-icon" />
    </view>
  </view>
</template>
<script lang="ts" setup>
import { getDynamicTabBar } from '@/utils/tabber'
const props = defineProps({
  pagePath: {
    type: String,
    default: '',
  },
})
const activeTabber = ref(1)
const tabBarList = getDynamicTabBar()
const getSrc = (index: number) => {
  if (index === activeTabber.value) {
    return `/static/images/tabbar/${tabBarList[index].icon}_active.png`
  }
  return `/static/images/tabbar/${tabBarList[index].icon}.png`
}
const handleTabClick = (index: number) => {
  if (tabBarList[index].pagePath === props.pagePath) {
    return
  }
  uni.switchTab({
    url: tabBarList[index].pagePath,
  })
}

onShow(() => {
  console.info('我出现了')
  activeTabber.value = tabBarList.findIndex((item) => item.pagePath === props.pagePath)
})
</script>
<style scoped lang="scss">
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to right, #05c4d8, #17549c, #1c88c7);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10rpx 0;
  z-index: 99;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10rpx 0;
}

.nav-icon {
  width: 50rpx;
  height: 60rpx;
}

.nav-text {
  font-size: 24rpx;
  color: #333;
}
</style>
